<template>
  <div class="stationSearch">
    <el-card>
      <el-form ref="form" :model="form" class="searchLine" label-width="120px">
        <el-form-item label="单位名称" class="searchItem">
          <el-select size="small" v-model="form.companyCode" placeholder="请选择单位" class="searchItemWidth" @change="companyChange" clearable filterable>
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode" :key="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场站名称" class="searchItem">
          <el-select size="small" v-model="form.stationCode" placeholder="场站名称" class="searchItemWidth" filterable clearable>
            <el-option v-for="item in stationList" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="诊断开始日期" class="searchItem">
          <el-date-picker
            size="small"
             v-model="form.checkTime"
             type="daterange"
             range-separator="-"
             class="searchItemWidth"
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
        </el-form-item>
        <el-form-item label="诊断模型" class="searchItem bigItem">
          <el-select size="small" v-model="form.title" placeholder="选择诊断模型" class="searchItemWidth" multiple clearable filterable>
            <el-option v-for="item in outerModelList" :label="item.diagModelName" :value="item.diagModelCode" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-row style="margin-bottom:0;">
          <el-button type="primary" size="small" icon="el-icon-search" @click="listSearch" style="float:right;">查询</el-button>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px; width:100%;" ref="container">
      <div class="lineBar1" id="lineBar1" ref="lineBar1">
      </div>
    </el-card>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import stationApi from "../../../api/stations"
  import manualApi from "../../../api/manual"
  import moment from 'moment'
  export default {
    name: "stationSearch",
    data () {
      return {
        form: {
          companyCode: '',
          stationCode: '',
          checkTime: null,
          title: []
        },
        tree: [],
        stationList: [],
        outerModelList: [],
        canvasData: [],
        myChart: null,
        isFirstComeIn: true
      }
    },
    mounted() {
      this.getOuterModelList()
      this.myChart = echarts.init(this.$refs.lineBar1)
      let that = this
      window.onresize = function () {
        that.myChart.resize()
      }
      this.setCanvasData()
      this.$nextTick(() => {
        this.myChart.resize()
      })
      let query = this.$route.query
      if (query && (query.companyCode || query.stationCode)) {
        this.form.companyCode = query.companyCode
        this.form.stationCode = query.stationCode
        this.getCompanies(true)
        this.companyChange(query.companyCode, true)
      } else {
        this.getCompanies()
      }
    },
    methods: {
      tick() {
        this.$nextTick(() => {
          this.myChart.resize()
        })
      },
      setCanvasData (data) {
        let xdata = [], yData1 = [], yData2 = []
        if (data) {
          data.map(item => {
            xdata.push(item.inspectDay)
            yData1.push(item.pinNum)
            yData2.push(item.dePicNum)
          })
        }
        this.myChart.setOption({
            color: [
              function () {
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                      offset:0,
                      color:'#0487ED'
                  },
                  {
                      offset:1,
                      color:'#0FD5F9'
                  }
                  ],false)
              },
              '#FF8C26'
            ],
            title: {
              show: true,
              text: '无人机航拍图片',
              textStyle: {
                color: '#3977F3'
              },
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                right: '5%',
                bottom: '20%',
                left: '5%'
            },
            // toolbox: {
            //     feature: {
            //         dataView: {show: true, readOnly: false},
            //         restore: {show: true},
            //         saveAsImage: {show: true}
            //     }
            // },
            legend: {
                data: ['图片数', '故障图片数'],
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: xdata,
                    axisLabel: {
                      rotate: -30,
                      color: '#808080'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#f0f0f0'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '图片数',
                    min: 0,
                    max: Math.max.apply(Math, yData1),
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: '#f0f0f0'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                      lineStyle: {
                          color: '#f0f0f0'
                      }
                    }
                },
                {
                    type: 'value',
                    name: '故障图片数',
                    min: 0,
                    max: Math.max.apply(Math, yData1),
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: '#f0f0f'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                      lineStyle: {
                          color: '#f0f0f0'
                      },
                      show: false
                    }
                }
            ],
            series: [
                {
                    name: '图片数',
                    type: 'bar',
                    data: yData1,
                    barWidth: 30,
                    itemStyle: {
                      normal: {
                        color: function () {
                          return new echarts.graphic.LinearGradient(0,1,0,0,[
                            {
                                offset:0,
                                color:'#0487ED'
                            },
                            {
                                offset:1,
                                color:'#0FD5F9'
                            }
                            ],false)
                        }
                      }
                    }
                },
                {
                    name: '故障图片数',
                    type: 'line',
                    yAxisIndex: 1,
                    data: yData2
                }
            ]
        })
      },
      getOuterModelList() {
        manualApi.getOuterModelList().then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.outerModelList = res.data.data
          }
        })
      },
      getCompanies(flag) {
        stationApi.getCompanyList().then(res => {
          if (res && res.data.code === 200) {
            this.tree = res.data.data
            if (this.isFirstComeIn && !flag) {
              this.companyChange(res.data.data[0].companyCode)
              this.form.companyCode = res.data.data[0].companyCode
            }
          }
        })
      },
      companyChange(value, flag) {
        if (!flag) {
          this.stationList = []
          this.form.stationCode = ''
        }
        if (!value) {
          return
        }
        manualApi.getStationByCompany({
          companyCode: value
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.stationList = res.data.data
            if (flag) {
              this.listSearch()
            }
            if (this.isFirstComeIn && !flag) {
              this.form.stationCode = res.data.data[0].stationCode
              this.listSearch()
              this.isFirstComeIn = false
            }
          }
        })
      },
      listSearch() {
        stationApi.stationResultSearch({
          companyCode: this.form.companyCode,
          stationCode: this.form.stationCode,
          diagDayStart: this.form.checkTime ? moment(this.form.checkTime[0]).format('YYYY-MM-DD') + ' 00:00:00' : '',
          diagDayEnd: this.form.checkTime ? moment(this.form.checkTime[1]).format('YYYY-MM-DD') + ' 23:59:59' : '',
          modelTypeList: this.form.title ? this.form.title.join(',') : ''
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.setCanvasData(res.data.data)
          }
        })
      },
      reset() {
        this.form = {
          companyCode: '',
          stations: '',
          checkTime: null,
          title: []
        }
        this.listSearch()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .stationSearch{
    .searchLine{
      .searchItem{
        display: inline-block;
        vertical-align: top;
      }
      .bigItem{
        width: 100%;
      }
    }
    .pagination{
      text-align: center;
      margin-top: 20px;
    }
    .lineBar1{
      width:100%;
      height: 400px;
    }
    .el-form-item{
      margin-bottom: 3px !important;
    }
  }
</style>
